<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- html事件：html没有和js分开 -->
    <button onClick="demo1()">按钮</button>
    <!-- DOM0事件：html和js是完全分离的，但是无法添加多个事件 -->
    <button id="btn">按钮</button>
    <!-- DOM2事件：事件不会被覆盖，但是写起来麻烦 -->
    <button id="btn1">按钮</button>
    <script>
        function demo1(){
            console.log("点击了按钮");
        }

        var btn = document.getElementById("btn");
        btn.onclick = function(){
            console.log("你好啊·1");
        }
        var btn1 = document.getElementById("btn1");
        btn1.addEventListener("click",function(){
            console.log("你已经点击了1");
        })
        btn1.addEventListener("click",function(){
            console.log("你已经点击了2");
        })
    </script>
</body>
</html>